<template>
    <h2>
        简单图表数据
    </h2>
    <div id="showSimple">

    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, inject } from 'vue';
import service from '../../../utils/service';
import type { AxiosResponse } from 'axios';

let echarts: any = inject('echarts')
// x轴数据
const xData = reactive<string[]>([])
// y轴数据
const yData = reactive<number[]>([])

// 指定图标的配置项和数据

const showChart = () => {
    let oShowSimple = document.getElementById("showSimple")
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(oShowSimple as HTMLElement)
    let option: any
    option = reactive({
        // x轴
        xAxis: {
            type: "category",
            // data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
            data: xData
        },
        // y轴
        yAxis: {
            type: "value"
        },
        // 类型
        series: [
            {
                // data: [150, 230, 224, 218, 135, 147, 260],
                data: yData,
                type: "line"
            }
        ]
    })
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize()
    })
}
// 获取图表数据
const getChartData = () => {
    service({
        url: `/data/simpleData`
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            let arr = res.data.data
            arr.forEach((item: any, index: any) => {
                xData.push(item.x)
                yData.push(item.val)
            });
        }
    }).then(() => {
        showChart()
    })
}

onMounted(() => {
    // showChart()
    getChartData()
})
</script>

<style scoped>
#showSimple {

    height: 300px;
}
</style>

